<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div>
        <a-tabs v-model="activeTab" @change="tabChange">
          <a-tab-pane v-for="item in tabs" :key="item.value" :tab="item.text"></a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <a-card :bordered="false">
      <a-row>
        <template  v-if="is_saas === false">
          <a-col :span="11">
            <a-alert
              message="该功能需要到微信公众平台(开发管理->开发设置->扫普通链接二维码打开小程序)中进行配置"
              banner
            /><br />
            <a-alert banner :showIcon="false" type="warning">
              <template slot="message">
                <div>协议类型: https</div>
                <div>选择大小写: 小写</div>
                <div>二维码规则: https://{{ qrcodeRule }} <a-icon type="copy" @click="copyContent(qrcodeRule)" /></div>
                <div>前缀占用规则: 不占用</div>
                <div>
                  小程序功能页面: alipay-order/orderMeal/orderMeal
                  <a-icon type="copy" @click="copyContent('alipay-order/orderMeal/orderMeal')" />
                </div>
              </template>
            </a-alert>
          </a-col>
          <a-col :span="2"></a-col>
          <a-col :span="11">
            <a-alert
              message="该功能需要到支付宝开放平台(选择应用->审核&发布->小程序码->关联普通二维码)中进行配置"
              banner
            /><br />
            <a-alert banner :showIcon="false" type="warning">
              <template slot="message">
                <div>匹配规则: 模糊匹配</div>
                <div>二维码地址: https://{{ qrcodeRule }} <a-icon type="copy" @click="copyContent(qrcodeRule)" /></div>
                <div>
                  小程序功能页: alipay-order/orderMeal/orderMeal
                  <a-icon type="copy" @click="copyContent('alipay-order/orderMeal/orderMeal')" />
                </div>
              </template>
            </a-alert>
          </a-col>
        </template>
        <template  v-if="is_saas === true && business_model === 1">
          <div>
            <a-alert
              message="绑定完成后可能需要等待10-15分钟即可使用，如仍无法打开小程序则联系管理员"
              banner
            /><br />
            <a-button type="primary" :loading='wx_loading' :disabled='wx_disabled' @click='bingQrcode(1)' style='margin-right: 10px;'>
              绑定微信
            </a-button>
            <a-button type="primary" :loading='ali_loading' :disabled='ali_disabled' @click='bingQrcode(2)'>
              绑定支付宝
            </a-button>
          </div>
          <br />
        </template>

        <a-col :span="24">
          <img class="img" v-for="(item, index) of qrcode" :key="index" :src="item" alt="" />
        </a-col>
      </a-row>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import storage from 'store'
import { getQrcode, IsBind, AliBindQrcode, DownQrcodeRules } from '@/api/orderMeal'

export default {
  name: '',
  components: {},
  data() {
    return {
      activeTab: '4',
      tabs: [
      {
          value: '0',
          text: '商品管理',
          path: 'OrderMealGoods',
        },
        {
          value: '1',
          text: '分类',
          path: 'OrderMealClassify',
        },
        {
          value: '2',
          text: '餐桌管理',
          path: 'OrderMealDesk',
        },
        {
          value: '3',
          text: '设置',
          path: 'OrderMealSetting',
        },
        {
          value: '4',
          text: '店铺点餐二维码',
          path: 'OrderMealQrcode',
        },
        {
          value: '5',
          text: '轮播图',
          path: 'OrderMealSlide',
        },
        {
          value: '6',
          text: '加料区',
          path: 'OrderMealAccessories',
        },
      ],
      qrcode: '',
      is_saas: true,
      business_model: 1,
      wx_loading: false,
      ali_loading: false,
      wx_disabled: false,
      ali_disabled: false,
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getQrcode()
  },
  computed: {
    qrcodeRule: function() {
      if (this.business_model !== 1) {
        return window.location.host + '/web/food/saas'
      }
      return window.location.host + '/web/food/' + storage.get('storeId')
    }
  },
  filters: {},
  methods: {
    copyContent: function(text) {
      this.$copyText(text)
        .then(e => {
          this.$message.success('复制成功')
        })
        .catch(err => {
          console.log(err)
          this.$message.error('复制失败')
        })
    },
    getQrcode() {
      getQrcode({}, false).then(res => {
        if (res.code === 0) {
          this.qrcode = res.data
          this.is_saas = res.is_saas
          this.business_model = parseInt(res.business_model)
        }
      })

      IsBind().then(res => {
        if (res.code === 0) {
          let {is_wx_bind, is_ali_bind} = res.data;
          if (parseInt(is_wx_bind) === 1) {
            this.wx_disabled = true;
          }
          if (parseInt(is_ali_bind) === 1) {
            this.ali_disabled = true;
          }
        }
      })
    },
    // tab切换
    tabChange(e) {
      if (e == 4) return
      let item = this.tabs[e]
      this.$router.push({ name: item.path })
    },
    bingQrcode(type) {
      console.log(type);
      if (type === 1) {
        if (this.wx_disabled === true) {
          return ;
        }
        DownQrcodeRules({}).then(res => {
          if (res.code === 0) {
            this.wx_disabled = true;
          }
        })
      } else {
        if (this.ali_disabled === true) {
          return ;
        }
        AliBindQrcode({}).then(res => {
          if (res.code === 0) {
            this.ali_disabled = true;
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.pay-checkbox {
  .pay-col {
    width: 100%;
    margin-bottom: 10px;
    /deep/.ant-checkbox-wrapper {
      display: flex;
      align-items: center;
    }
  }
  .pay-col:first-child {
    margin-top: 2px;
  }
  /deep/.ant-form-item-control-wrapper {
    width: 430px;
  }
  .label-self {
    width: 140px;
    text-align: right;
    padding-right: 20px;
  }
  .add-padding {
    width: 153px;
  }
}

.img {
  margin-right: 10px;
  width: 200px;
  /* height: 200px; */
}
</style>
